iT邦幫忙

2026 iThome 鐵人賽

DAY 3
0

根據夥伴許博士的三個網頁截圖,我自己用Antigravity做出響應式 Web 網站系統 (Responsive Web Application) 規格與設計。
#採用現代化 1200px 寬螢幕 Web Dashboard Layout。
頂部設置全寬網頁導覽列 (Header Bar) 與頁籤切換按鈕(履歷追溯、藥劑決策查詢、市售殘留統計)。
#多欄自適應網頁排版
履歷追溯頁面:左側為批次與採收倒數 Hero 卡片,右側為時序記錄區塊(Desktop 雙欄並排)。
藥劑決策查詢頁面:左側為過濾條件面板(包含剩餘採收天數連動),右側為完整寬度的網頁數據表格。
市售殘留統計頁面:上方為膠囊母體切換,中段為 4 大指標 Metric Cards 與動態分母對照表。

Web 網站技術架構 (Web System Architecture)[ 前端 Web 瀏覽器 (Desktop & Mobile Web) ]
│ (HTML5 + Vanilla CSS / Tailwind + Modern ES6 JS)

├── 1. 產銷履歷與採收安全期追溯儀表板 (Traceability Dashboard)
├── 2. 藥劑決策查詢網頁與篩選矩陣 (Pesticide Query Web Matrix)
└── 3. 市售殘留統計與風險圖表 (TFDA Sampling Web Analytics)


[ REST API / Backend Web Services (Node.js/Express or Python/FastAPI) ]

├── 安全採收期判定與倒數邏輯 (PHI Engine)
├── IRAC/FRAC 作用機制輪用邏輯
└── Open Data 每日/定期自動同步服務


[ 資料庫與數據源 (PostgreSQL + PostGIS) ]
├── 農業部防檢署:農藥登記與用藥法規資料庫 Open Data
├── 食藥署 (TFDA):市售農產品殘留抽驗 Open Data
└── 產銷履歷 (TAP) / 智慧農場噴藥管理紀錄
https://ithelp.ithome.com.tw/upload/images/20260905/20183410aI6qtzl1w9.pnghttps://ithelp.ithome.com.tw/upload/images/20260905/20183410HMWOqNztsK.pnghttps://ithelp.ithome.com.tw/upload/images/20260905/20183410CYbT9pawkC.png


上一篇
「有 AI 菜有辦法」Day 2
下一篇
「有 AI 菜有辦法」Day 4
系列文
從農地守護餐桌食安!《審時農曆:短期葉菜栽耕時序決策系統》18
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言